<template>
  <div>
    <BasicTable
      @register="registerTable"
      size="small"
      title="安全生产资金投入记录"
      :pagination="false"
      :scroll="{ x: false, y: 'calc(100vh - 380px)' }"
    >
      <template #form-tm="{ model, field }">
        <a-radio-group
          v-model:value="choosetmType"
          style="margin: 0 5px 5px 0"
          button-style="solid"
          @change="changeChooseTm"
        >
          <a-radio-button value="1">本月</a-radio-button>
          <a-radio-button value="3">本季度</a-radio-button>
          <a-radio-button value="4">本年</a-radio-button>
          <a-radio-button value="5">自定义</a-radio-button>
        </a-radio-group>
        <a-range-picker
          v-show="choosetmType == '5'"
          v-model:value="model[field]"
          valueFormat="YYYY-MM-DD"
          :allowClear="false"
        />
      </template>
      <template #toolbar>
        <a-button type="primary" @click="onAddInvestRecordButtonClick">新增</a-button>
      </template>
      <template #action="{ column, record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              label: '编辑',
              onClick: onEditInvestRecordButtonClick.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              label: '删除',
              popConfirm: {
                title: '是否确认删除',
                placement: 'left',
                confirm: onDeleteInvestRecordButtonClick.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddOrUpdateInvestRecord
      @register="registerAddOrUpdateInvestRecordModal"
      @success="afterSuccess"
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted, nextTick, h, computed } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { OperationTypeEnum } from '/@/enums/appEnum';
  import { useModal } from '/@/components/Modal';
  import { Tag, TreeSelect } from 'ant-design-vue';
  import { queryEnumOptions } from '/@/api/platform/enum';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getUserOrganization } from '/@/api/ehs/organization';
  import moment from 'moment';
  import { queryInvestRecordList, deleteInvestRecord } from '/@/api/ehs/investrecord';
  import { queryInvestRecordSchema, invesrRecordcolumns } from './investrecord.data';
  const { globalProjectCode } = useGlobSetting();
  import AddOrUpdateInvestRecord from './AddOrUpdateInvestRecord.vue';
  export default defineComponent({
    name: 'investrecord',
    components: {
      BasicTable,
      TableAction,
      Tag,
      AddOrUpdateInvestRecord,
    },
    setup(props, {}) {
      const choosetmType = ref('4');
      const projectCode = ref<String>(globalProjectCode);
      const organizationCode = ref();
      const [
        registerAddOrUpdateInvestRecordModal,
        { openModal: openAddOrUpDateInvestRecordModal },
      ] = useModal();
      const [registerTable, { reload, getForm }] = useTable({
        api: queryInvestRecordList,
        immediate: false,
        columns: invesrRecordcolumns,
        canResize: true,
        showTableSetting: true,
        tableSetting: {
          redo: false,
        },
        useSearchForm: true,
        formConfig: {
          fieldMapToTime: [['tm', ['begintm', 'endtm'], 'YYYY-MM-DD']],
          labelWidth: 90,
          schemas: queryInvestRecordSchema,
        },
        beforeFetch: (params) => {
          params.orgcode = organizationCode.value;
        },
        striped: false,
        showIndexColumn: false,
        bordered: true,
        ellipsis: true,
        indentSize: 15,
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right', //表格操作列是否固定，不设置时默认固定在右侧
        },
      });

      function onAddInvestRecordButtonClick() {
        let propsData: QcUnifyTransToChildProps = {
          moduleName: '安全生产资金投入',
          operateType: OperationTypeEnum.ADD,
          orgcode: organizationCode.value,
        };
        openAddOrUpDateInvestRecordModal(true, propsData);
      }

      function onEditInvestRecordButtonClick(record) {
        let propsData: QcUnifyTransToChildProps = {
          moduleName: '安全生产资金投入',
          operateType: OperationTypeEnum.EDIT,
          orgcode: organizationCode.value,
          dataId: record.id,
        };
        openAddOrUpDateInvestRecordModal(true, propsData);
      }

      function onDeleteInvestRecordButtonClick(record) {
        deleteInvestRecord(record.id).then((res) => {
          if (!res) {
            createMessage.success('删除成功');
            reload();
          }
        });
      }

      function changeChooseTm(e) {
        let op = {
          1: [
            moment().startOf('month').format('YYYY-MM-DD'),
            moment().endOf('month').format('YYYY-MM-DD'),
          ],
          3: [
            moment().startOf('quarter').format('YYYY-MM-DD'),
            moment().endOf('quarter').format('YYYY-MM-DD'),
          ],
          4: [
            moment().startOf('year').format('YYYY-MM-DD'),
            moment().endOf('year').format('YYYY-MM-DD'),
          ],
        };
        if (e.target.value != '5') {
          getForm().setFieldsValue({
            tm: op[e.target.value],
          });
        }
        getForm().clearValidate();
      }

      function afterSuccess() {
        reload();
      }

      onMounted(() => {
        //  获取枚举类
        getUserOrganization(projectCode.value).then((res) => {
          // 请求时需要传入用户的组织编码
          organizationCode.value = res?.orgcode;
          reload();
        });
      });
      return {
        moment,
        organizationCode,
        registerAddOrUpdateInvestRecordModal,
        registerTable,
        onEditInvestRecordButtonClick,
        afterSuccess,
        onDeleteInvestRecordButtonClick,
        onAddInvestRecordButtonClick,
        changeChooseTm,
        choosetmType,
      };
    },
  });
</script>

<style scoped>
  a {
    color: #000;
  }
</style>
